import React, { Component } from 'react'
import { connect } from 'react-redux'
import * as utility from 'utility'
import {
  Form, Input, Button, Icon, message
} from 'antd';
const FormItem = Form.Item
class LoginForm extends Component {
  goRegister = () => {
    this.props.history.push('/register')
  }
  handleSubmit = (e) => {
    e.preventDefault()
    const { form, dispatch } = this.props
    form.validateFields((err, values) => {
      if (!err) {
        const salt = 'cs_asdkj5767_***'
        values.password = utility.md5(utility.md5(values.password + salt))
        dispatch({
          type: 'asyncLogin',
          payload: values,
          callback: (res) => {
            const { code, msg, data = {} } = res
            const url = data.type === 'boss' ? '/bossInfo' : '/geniusInfo'
            if (code === 200) {
              message.success(msg)
              this.props.history.push(url)
            } else {
              message.warn(msg)
            }
          }
        })
      }
    })
  }
  render() {
    const { getFieldDecorator } = this.props.form
    return (
      <div className="login-page">
        <h1>login</h1>
        <Form onSubmit={this.handleSubmit}>
          <FormItem>
            {
              getFieldDecorator('userName', {
                rules: [{ required: true, message: 'Please input your username!' }],
              })(
                <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
              )
            }
          </FormItem>
          <FormItem>
            {
              getFieldDecorator('password', {
                rules: [{ required: true, message: 'Please input your password!' }],
              })(
                <Input type="password" prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="password" />
              )
            }
          </FormItem>
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
            >
              Login
            </Button>
          </Form.Item>
        </Form>
        <span onClick={this.goRegister}>register</span>
      </div>
    )
  }
}
const Login = Form.create()(LoginForm)
export default connect(state => ({}))(Login)